<template>
    <div class="div-pngs">
        <div class="loginfo">
            <div class="logpng">
            </div>
            <div class="logform">
                <el-tabs
                    v-model="activeName"
                    class="demo-tabs"
                    key="logform"
                >
                    <!-- 登录 -->
                    <el-tab-pane label="登录" name="first" class="el-tab-pane">
                        <LoginVue/>
                    </el-tab-pane>
                    <!-- 注册 -->
                    <el-tab-pane label="注册" name="second">
                        <RegistersVue/>
                    </el-tab-pane>
                </el-tabs>
                <router-link class="a_r" to="/homes/datas_tabs">回到首页</router-link>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref,reactive } from 'vue'
import LoginVue from './Login.vue';
import RegistersVue from './Registers.vue';
import { useRouter, useRoute } from "vue-router";
const route = useRoute();
const activeName = ref('first')
activeName.value = route.query.second
</script>

<style scoped>
.div-pngs {
    height: 100%;
    width: 100%;
    background: url("../../assets/logins/background-image.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    min-width: 1600px;
    min-height: 900px;
}
.loginfo{
    background-color: white;
    width: 1000px;
    height: 500px;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    border-radius: 10px;
}
.logpng{
    width: 50%;
    height: 100%;
    background: url("../../assets/logins/Couple-test.jpg") center center no-repeat;
    background-color: white;
    border-radius: 10px 10px 10px 10px; 
}

.logform{
    transform: translate(100%, -100%);
    width: 50%;
    height: 100%;
    background-color:#ecf5ff;
    box-shadow: var(--el-box-shadow-dark);
    border-radius: 10px 10px 10px 10px; 
}
:deep(.el-tabs__content) {
    height: 350px;
}
:deep(.el-tabs__nav-scroll) {
    overflow: hidden;
    margin-left: 38%;
    margin-top: 5%;
}
.a_r{
  float: right;
  margin-top: 10px;
  margin-left: 10px;
  margin-right:50px ;
  color: rgb(6, 6, 6);
  text-decoration: none;
}
.a_r:hover{
  color: #409EFF;
}
</style>>

